<template>
  <div class="question-container">
    <div class="container">
      <el-card>
        <div style="text-align: right; margin-bottom: 15px">
          <el-button
            icon="el-icon-edit"
            type="success"
            size="small"
            class="addQuestion"
            @click="$router.push('new')"
            >新增试题</el-button
          >
        </div>

        <el-form label-width="75px" size="small">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  @change="getChangeSubject"
                  style="width: 100%"
                  v-model="requestParams.subjectID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in subjectsList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option
                ></el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  style="width: 100%"
                  v-model="requestParams.catalogID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in directoryList"
                    :key="item.id"
                    :label="item.directoryName"
                    :value="item.id"
                  ></el-option
                ></el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  style="width: 100%"
                  v-model="requestParams.tags"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in tagsList"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.id"
                  ></el-option
                ></el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  style="width: 100%"
                  v-model="requestParams.keyword"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  style="width: 100%"
                  v-model="requestParams.questionType"
                  placeholder="请选择"
                >
              <el-option v-for="item in questionType" :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
                </el-select></el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  style="width: 100%"
                  v-model="requestParams.difficulty"
                  placeholder="请选择"
                >
                <el-option v-for="item in difficulty" :key="item.value"
                :label="item.label"
                :value="item.value"></el-option></el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  style="width: 100%"
                  v-model="requestParams.direction"
                  placeholder="请选择"
                >
                <el-option v-for="item in direction" :key="item" :label="item"
                :value="item"></el-option></el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  style="width: 100%"
                  v-model="requestParams.creatorID"
                  placeholder="请选择"
                ></el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input
                  style="width: 100%"
                  v-model="requestParams.remarks"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input
                  style="width: 100%"
                  v-model="requestParams.shortName"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                @change="provinceChange"
                  style="width: 50%"
                  v-model="requestParams.province"
                  placeholder="请选择"
                >
                 <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
                </el-select>
                <el-select
                  style="width: 50%"
                  v-model="requestParams.city"
                  placeholder="请选择"
                >
                   <el-option
                  v-for="item in citysList"
                  :key="item.id"
                  :label="item"
                  :value="item"
                ></el-option>
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="6" style="text-align: right">
              <template>
                <el-button size="small" @click="clear">清除</el-button>
                <el-button size="small" type="primary" @click="search"
                  >搜索</el-button
                >
              </template>
            </el-col>
          </el-row>
        </el-form>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all">
               <el-alert type="info" show-icon>
            <template #title>数据一共{{ total }}条 </template>
          </el-alert>
             <el-table :data="questionData" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column label="题型" width="120">
              <template #default="{ row }">
                {{
                  questionType.find((item) => item.value === +row.questionType)
                    .label
                }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template #default="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="200">
              <template #default="{ row }">
                {{ row.addDate | parseTime }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template #default="{ row }">
                {{
                  difficulty.find((item) => item.value === +row.difficulty)
                    .label
                }}
                <!-- {{row.difficulty}} -->
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template #default="{ row }">
                {{ chkType.find((item) => item.value === +row.chkState).label }}
                <!-- {{row.chkState}} -->
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template #default="{ row }">
                {{
                  publishType.find((item) => item.value === +row.publishState)
                    .label
                }}
                <!-- {{row.publishState}} -->
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="{ row }">
                <el-button
                  @click="handleClickLook(row)"
                  type="text"
                  size="small"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="openCheckDialog(row.id)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.publishState === 0 ? true : false"
                  @click="$router.push(`new?id=${row.id}`)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handlechoicePublish(row)"
                  >{{ row.publishState !== 1 ? "上架" : "下架" }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delQuestionById(row.id)"
                  :disabled="row.publishState === 0 ? true : false"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          </el-tab-pane>
          <!-- 待审 -->
          <el-tab-pane label="待审核" name="1">
               <el-alert type="info" show-icon>
            <template #title>数据一共{{ total }}条 </template>
          </el-alert>
             <el-table :data="questionData" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column label="题型" width="120">
              <template #default="{ row }">
                {{
                  questionType.find((item) => item.value === +row.questionType)
                    .label
                }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template #default="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="200">
              <template #default="{ row }">
                {{ row.addDate | parseTime }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template #default="{ row }">
                {{
                  difficulty.find((item) => item.value === +row.difficulty)
                    .label
                }}
                <!-- {{row.difficulty}} -->
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template #default="{ row }">
                {{ chkType.find((item) => item.value === +row.chkState).label }}
                <!-- {{row.chkState}} -->
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template #default="{ row }">
                {{
                  publishType.find((item) => item.value === +row.publishState)
                    .label
                }}
                <!-- {{row.publishState}} -->
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="{ row }">
                <el-button
                  @click="handleClickLook(row)"
                  type="text"
                  size="small"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="openCheckDialog(row.id)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.publishState === 0 ? true : false"
                  @click="$router.push(`new?id=${row.id}`)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handlechoicePublish(row)"
                  >{{ row.publishState !== 1 ? "上架" : "下架" }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delQuestionById(row.id)"
                  :disabled="row.publishState === 0 ? true : false"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="2"
          >
             <el-alert type="info" show-icon>
            <template #title>数据一共{{ total }}条 </template>
          </el-alert><el-table :data="questionData" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column label="题型" width="120">
              <template #default="{ row }">
                {{
                  questionType.find((item) => item.value === +row.questionType)
                    .label
                }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template #default="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="200">
              <template #default="{ row }">
                {{ row.addDate | parseTime }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template #default="{ row }">
                {{
                  difficulty.find((item) => item.value === +row.difficulty)
                    .label
                }}
                <!-- {{row.difficulty}} -->
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template #default="{ row }">
                {{ chkType.find((item) => item.value === +row.chkState).label }}
                <!-- {{row.chkState}} -->
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template #default="{ row }">
                {{
                  publishType.find((item) => item.value === +row.publishState)
                    .label
                }}
                <!-- {{row.publishState}} -->
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="{ row }">
                <el-button
                  @click="handleClickLook(row)"
                  type="text"
                  size="small"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="openCheckDialog(row.id)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.publishState === 0 ? true : false"
                  @click="$router.push(`new?id=${row.id}`)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handlechoicePublish(row)"
                  >{{ row.publishState !== 1 ? "上架" : "下架" }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delQuestionById(row.id)"
                  :disabled="row.publishState === 0 ? true : false"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-tab-pane>
          <el-tab-pane label="已拒绝" name="3">
               <el-alert type="info" show-icon>
            <template #title>数据一共{{ total }}条 </template>
          </el-alert> <el-table :data="questionData" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column label="题型" width="120">
              <template #default="{ row }">
                {{
                  questionType.find((item) => item.value === +row.questionType)
                    .label
                }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template #default="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="200">
              <template #default="{ row }">
                {{ row.addDate | parseTime }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template #default="{ row }">
                {{
                  difficulty.find((item) => item.value === +row.difficulty)
                    .label
                }}
                <!-- {{row.difficulty}} -->
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template #default="{ row }">
                {{ chkType.find((item) => item.value === +row.chkState).label }}
                <!-- {{row.chkState}} -->
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template #default="{ row }">
                {{
                  publishType.find((item) => item.value === +row.publishState)
                    .label
                }}
                <!-- {{row.publishState}} -->
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="{ row }">
                <el-button
                  @click="handleClickLook(row)"
                  type="text"
                  size="small"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="openCheckDialog(row.id)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.publishState === 0 ? true : false"
                  @click="$router.push(`new?id=${row.id}`)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handlechoicePublish(row)"
                  >{{ row.publishState !== 1 ? "上架" : "下架" }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delQuestionById(row.id)"
                  :disabled="row.publishState === 0 ? true : false"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table> </el-tab-pane>

          <el-pagination
            style="text-align: right; margin-top: 18px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requestParams.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="requestParams.pagesize"
            layout=" prev, pager, next,sizes, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </el-tabs>
      </el-card>
      <random-dialog ref="RandomDialog" :question="rowObj"></random-dialog>
      <el-dialog
        title="题目审核"
        :visible="showCheckDialog"
        @close="closeCheckDialog"
      >
        <el-radio v-model="requestParams.chkState" :label="1" value="1">通过</el-radio>
        <el-radio v-model="requestParams.chkState" :label="2" value="2">拒绝</el-radio>
        <el-input type="textarea" v-model="chkRemarks"></el-input>
        <template #footer>
          <el-button @click="showCheckDialog = false">取消</el-button>
          <el-button type="primary" @click="handleCheckSubmit">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { list as directoryList } from '@/api/hmmm/directorys.js'
import { reqGetlist as tagsSimple } from '@/api/hmmm/tags.js'
import RandomDialog from '@/module-hmmm/components/random-dialog'
import {
  difficulty,
  questionType,
  chkType,
  publishType,
  direction
} from '@/api/hmmm/constants.js'
import {
  choice,
  choiceAdd,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  name: 'QuestionChiose',
  data () {
    return {
      citysList: [],
      provinces: provinces(),
      daiList: [],
      yiList: [],
      juList: [],
      tagsList: [],
      directoryList: [],
      subjectsList: [],
      rowObj: {}, // 预览
      id: null,
      total: 20,
      value: '',
      difficulty,
      questionType,
      chkType,
      publishType,
      direction,
      disabled: false,
      question: {},
      page: 1,
      pagesize: 5,
      showCheckDialog: false,
      // RandomDialog:false,
      activeName: 'all',
      questionData: [],

      chkRemarks: null,
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: 'all'
      }
    }
  },
  methods: {
    // 城市列表
    provinceChange () {
      this.requestParams.city = ''
      // console.log(this.formData.province)
      const res = citys(this.requestParams.province)
      // console.log(res)
      this.citysList = res
    },
    async getTagsSimple () {
      const { data: { items } } = await tagsSimple({ subjectID: this.requestParams.subjectID })
      this.tagsList = items
      console.log(items, 666)
    },
    async getChangeSubject () {
      const { data: { items } } = await directoryList({ subjectID: this.requestParams.subjectID })
      console.log(items, 123, this.requestParams.subjectID)
      this.directoryList = items
      this.getTagsSimple()
    },
    async getSubject () {
      const { data } = await simple()
      console.log(data)
      this.subjectsList = data
    },
    async search () {
      // const params = { ...this.requestParams }

      // const { data } = await choice({ params, chkState: null })
      this.getChoice()
      // console.log(data, 5555);
      // this.questionData = data.items;
      console.log('搜索')
    },
    clear () {
      this.requestParams = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: 'all'
      }
    },
    openCheckDialog (id) {
      this.showCheckDialog = true
      this.id = id
    },

    async handleCheckSubmit () {
      const res = await choiceCheck({
        id: this.id,
        chkState: this.requestParams.chkState,
        chkRemarks: this.chkRemarks
      })
      console.log(res)
      this.$message.success('审核修改成功')
      this.showCheckDialog = false
    },
    closeCheckDialog () {
      console.log('审核按钮点击取消')
      this.showCheckDialog = false
    },
    async handlechoicePublish (value) {
      if (value.publishState === 1) {
        value.publishState = 0
        const { data } = await choicePublish({
          id: value.id,
          publishState: value.publishState
        })
        console.log(data)
        this.$message.success('下架成功')
      } else {
        value.publishState = 1
        const { data } = await choicePublish({
          id: value.id,
          publishState: value.publishState
        })
        console.log(data)
        this.$message.success('上架成功')
      }

      // this.disabled = !this.disabled
    },
    delQuestionById (id) {
      this.$confirm('此操作将永久删除该题目,是否继续?', '提示')
        .then(async () => {
          const res = await choiceAdd({ id: id, choiceState: 0 })
          console.log(res, '删除成功')
          this.getChoice()
        })
        .catch(() => {
          console.log('取消')
        })
    },
    async getChoice () {
      const params = { ...this.requestParams }
      if (params.chkState === 'all') params.chkState = null
      params.page = this.page
      params.pagesize = this.pagesize

      // console.log(params, 555);
      const { data } = await choice(params)
      console.log(data, 5555)
      this.questionData = data.items
      this.total = data.counts
      // this.requestParams = data
    //  chkState // console.log(this.total)
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val
      this.page = 1
      this.getChoice()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getChoice()
    },
    async handleClick (tab) {
      console.log(tab.name)
      this.requestParams.chkState = null
      if (tab.name === 'all') {
        const params = { ...this.requestParams }
        if (params.chkState === 'all') params.chkState = null
        params.page = this.page
        params.pagesize = this.pagesize
        const { data } = await choice(params)
        this.questionData = data.items
        this.total = data.counts
      }
      if (tab.name !== 'all') {
        this.requestParams.chkState = +tab.name
        const { data } = await choice({ chkState: this.requestParams.chkState })
        this.questionData = data.items
        this.total = data.counts
      }
    },
    handleClickLook (row) {
      console.log(row)
      this.rowObj = row
      this.$refs.RandomDialog.showRandomDialog = true
    }
  },
  created () {
    this.getChoice()
    this.getSubject()
  },
  components: {
    RandomDialog
  },
  filters: {
    dealType (value) {
      if (value) { return questionType.find((item) => item.value === +value).label + '题' }
    },
    dealDiff (value) {
      if (value) return difficulty.find((item) => item.value === +value).label
    }
  }
}
</script>

<style scoped lang='scss'>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
</style>
